<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
        <script src="js/ajaxUtils.js"></script>
        <script src="js/check.js"></script>
		<script src="js/register.js"></script>
	</head>
	<body>
		<article style="width: 700px;">
			<header>
				<h1>用户注册</h1>
			</header>
			<section>
                <form id="form_reg" name="form_reg" method="POST" action="">
                    <fieldset id="uerRegister">
                        <legend hidden>用户注册</legend>
                        <table class="registerTable">
                            <tbody id="registerTbody">
                                    <tr>
                                        <td><label for="userName">用户名：</label></td>
                                        <td><input type="text" name="userName" id="userName" value="" placeholder="4-16位，英文开头" onblur="checkusername()"/></td>
                                        <td>
                                            <div id="userNameImage"></div>
                                            <div id="userNameMessage"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                            <td><label for="nickName">昵称：</label></td>
                                            <td><input type="text" name="nickName" id="nickName" value="" placeholder="可以使用中文" onblur="checknickname()" /></td>
                                            <td>
                                                <div id="nickNameImage"></div>
                                                <div id="nickNameMessage"></div>
                                            </td>
                                        </tr>
                                    <tr>
                                        <td><label for="password">密码：</label></td>
                                        <td><input type="password" name="password" id="password" value="" placeholder="4-16位，英文数字"  onblur="checkpassword()"/></td>
                                        <td>
                                            <div id="passwordImage"></div>
                                            <div id="passwordMessage"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><label for="rePassword">重复密码：</label></td>
                                        <td><input type="password" name="rePassword" id="rePassword" value="" placeholder="请再次输入密码验证"   onblur="checkrepassword()" /></td>
                                        <td>
                                            <div id="rePasswordImage"></div>
                                            <div id="rePasswordMessage"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>性别：</td>
                                        <td colspan="2">
                                            <input type="radio" name="sex" id="sex" value="0" checked/>
                                            <label for="man">男</label>&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="radio" name="sex" id="sex" value="1" />
                                            <label for="woman">女</label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>来自于：</td>
                                        <td colspan="2">
                                            <select id="city01" name="city01" onchange="checkcity()"><option value="0">请选择所在的城市 </option><option value="11">北京</option><option value="12">天津</option><option value="13">河北</option><option value="14">山西</option><option value="15">内蒙古</option><option value="21">辽宁</option><option value="22">吉林</option><option value="23">黑龙江</option><option value="31">上海</option><option value="32">江苏</option><option value="33">浙江</option><option value="34">安徽</option><option value="35">福建</option><option value="36">江西</option><option value="37">山东</option><option value="41">河南</option><option value="42">湖北</option><option value="43">湖南</option><option value="44">广东</option><option value="45">广西</option><option value="46">海南</option><option value="50">重庆</option><option value="51">四川</option><option value="52">贵州</option><option value="53">云南</option><option value="54">西藏</option><option value="61">陕西</option><option value="62">甘肃</option><option value="63">青海</option><option value="64">宁夏</option><option value="65">新疆</option><option value="71">台湾</option><option value="81">香港</option><option value="82">澳门</option></select>
                                            <select id="city02" name="city02">
                                                <option value="0">请选择所在的城市 </option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>爱好：</td>
                                        <td colspan="2">
                                            <input type="checkbox" name="fav" id="book" value="book" />
                                            <label for="book">读书</label>&nbsp;
                                            <input type="checkbox" name="fav" id="music" value="music" />
                                            <label for="musics">音乐</label>
                                            <input type="checkbox" name="fav" id="painting" value="painting" />
                                            <label for="painting">绘画</label>
                                            <input type="checkbox" name="fav" id="sport" value="sport" />
                                            <label for="sport">运动</label>
                                            <input type="checkbox" name="fav" id="code" value="code" />
                                            <label for="code">编程</label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>email</td>
                                        <td><input type="text" name="email" id="email" placeholder="请输入正确的邮箱地址" onblur="checkemail()"></td>
                                        <td>
                                            <div id="emailImage"></div>
                                            <div id="emailMessage"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                            <td>照片：</td>
                                        <td><div class="row cl">
                                            <div class="formControls col-xs-8 col-sm-9">
                                                <div class="uploader-thum-container">
                                                    <input type="file" name="picture" id="picture" accept=".jpg">(仅可上传jpg)
                                                </div>
                                            </div>
                                        </div></td>
                                        </tr>
            
                                    <tr>
                                        <td>备注：</td>
                                        <td><input type="text" name="ps" id="ps" value="" placeholder="可不填" /></td>
                                    </tr>
                            </tbody>
                        </table>
                        <nav id="btnOperation">
                            <button type="reset" class="btn" id="btn_res" >重置</button>&nbsp;&nbsp;
                            <button type="button" class="btn" id="btn_reg">注册</button>
                        </nav>
                    </fieldset>
                </form>
			</section>
		</article>
	</body>
</html>
